<template>
  <publicList
      ref="publicListRef"
      @toolChange="toolChange"
      :toolList="toolList.toolList"
      :paramsList="toolList.paramsList"
      :selectNums="ids.length"
      :queryParams="toolList.queryParams"
      @searchSubmit="searchSubmit"
      :total="total"
      @paginate="handlePaginateFun"
      :tableData="toolList.tableDataList"
      :columns="toolList.tableItem"
      :loading="loading"
      rowKey="uuid"
      @handleSelectionChange="handleSelectionChange"
  >
    <template v-slot:tableHead="head">
      {{ head.item.label }}
    </template>
    <template v-slot:tableColumn="scope">
      <span v-if="scope.scope.prop=='productStatus'">
        {{ scope.scope.row.productStatus == 1 ? '暂存' : '已审批' }}
      </span>
      <span v-else-if="scope.scope.prop=='productNum'"
            class="text_decoration"
            @click="tableRowClick(scope.scope.row)"
      >{{
          scope.scope.row.productNum
        }}</span>
      <span v-else>{{ scope.scope.row[scope.scope.prop] }}</span>
    </template>
  </publicList>
  <el-dialog
      v-model="dialogVisible"
      title="新增"
      width="40%"
      draggable
      :modal="false"
      :before-close="cancel"
      custom-class="draggable_custom_class"
  >
    <el-form
        ref="brandFormRef"
        label-width="100px"
        :model="form.formData"
        :rules="form.formFules"
    >
      <formLabel
          :publicForm="form.basicForm"
          :formData="form.formData"
          :detailsbool="detailsbool"
          @formSelectEmit="formSelectEmit"
      >
      </formLabel>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: center">
      <el-button type="primary" v-if="!detailsbool" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {ref, reactive, getCurrentInstance, onMounted} from "vue"
import {
  addGoods,
  detailsGoods,
  getGoodsList,
  disableGoods,
  productLinePulldown,
  productLineSeriesPulldown,
  getBrandList
} from "@/api/brand";
import {tableMixin} from "@/mixins/tableMixin";

export default {
  name: "product",
  components: {},
  data() {
    return {}
  },
  setup() {

    const detailsbool = ref(false)
    const dialogVisible = ref(false)
    const form = reactive({
      formData: {
        productNum: "GO00003194",
        brandNum: "",
        modelNum: "",
        productStatus: "1",
        productLineId: "",
        seriesId: "",
        modelDesc: "",
        remark: '',
        imgUrlList: [],
      },
      basicForm: {
        title: '基本信息',
        isTitle: false,
        showSearch: true,
        data: [
          {
            label: '商品编码',
            prop: 'productNum',
            type: 'text', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: true, //是否禁用
            placeholder: '请输入商品编码'
          },
          {
            label: '商品品牌',
            prop: 'brandNum',
            type: 'select', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: false, //是否禁用
            isFilterable: true,
            isMultiple: false,
            option: [],
            placeholder: '请选择商品品牌'
          },
          {
            label: '商品型号',
            prop: 'modelNum',
            type: 'text', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: false, //是否禁用
          },
          {
            label: '状态',
            prop: 'productStatus',
            type: 'select', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: true, //是否禁用
            placeholder: '请选择状态',
            isFilterable: true,
            isMultiple: false,
            option: [
              {label: "暂存", value: '1'},
              {label: "已审核", value: '2'},
            ]
          },
          {
            label: '产品线',
            prop: 'productLineId',
            type: 'select', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: false, //是否禁用
            placeholder: '请选择产品线',
            isFilterable: true,
            isMultiple: false,
            option: []
          },
          {
            label: '系列',
            prop: 'seriesId',
            type: 'select', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: false, //是否禁用
            placeholder: '请选择系列',
            isFilterable: true,
            isMultiple: false,
            option: []
          },
          {
            label: '型号描述',
            prop: 'modelDesc',
            type: 'text', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: false, //是否禁用
            placeholder: '请输入型号描述'
          },
          {
            label: '备注',
            prop: 'remark',
            type: 'textarea', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: false, //是否禁用
            placeholder: '请输入备注'
          },
          {
            label: '图片上传',
            prop: 'imgUrlList',
            type: 'upload', //text 文本  select 下拉  data 日期选择
            colSpan: 12,
            disabled: false, //是否禁用
            placeholder: '只能上传jpg/png文件，且不超过500kb',
            len: "4"
          },
        ]
      },
      formFules: {
        productNum: [{
          required: true,
          message: '请输入商品品牌',
          trigger: 'blur',
        }],
        brandNum: [{
          required: true,
          message: '请输入品牌编码',
          trigger: 'blur',
        }],
        modelNum: [{
          required: true,
          message: '请输入型号',
          trigger: 'blur',
        }],
        productLineId: [{
          required: true,
          message: '请选择系列',
          trigger: 'change',
        }]
      }
    })
    const brandFormRef = ref();
    const toolList = reactive({
      toolList: [
        {id: "3", label: "新增", ismul: false},
        {id: "4", label: "审核", ismul: false},
        {id: "5", label: "反审核", ismul: false},
        // {id: "1", label: "刷新", ismul: false},
        // {id: "2", label: "退出", ismul: false},
      ],
      paramsList: [
        {
          label: '状态',
          prop: 'productStatus',
          queryonce: true,
          type: '2',
          queryList: [{label: '暂存', value: '1'}, {label: '已审核', value: '2'}]
        },
        {label: '品牌', prop: 'brandNumList', queryonce: false, type: '2', queryList: []},
      ],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        brandNumList: [],
        productStatus: '',
        quickSearchValue: ""
      },
      tableDataList: [],
      tableItem: [
        {label: '状态', prop: 'productStatus', align: 'left', width: "80"},
        {label: '商品编码', prop: 'productNum', align: 'left'},
        {label: '照片', prop: 'imgurlList', align: 'left'},
        {label: '商品品牌', prop: 'brandName', align: 'left'},
        {label: '商品型号', prop: 'modelNum', align: 'left'},
        {label: '型号描述', prop: 'modelDesc', align: 'left'},
        {label: '产品线', prop: 'productLineId', align: 'left'},
        {label: '系列', prop: 'seriesId', align: 'left'},
        {label: '备注', prop: 'remark', align: 'left'},
        {label: '创建人', prop: 'createNickName', align: 'left'},
        {label: '创建日期', prop: 'createTime', align: 'left'},
        {label: '更新人', prop: 'updateNickName', align: 'left'},
        {label: '更新日期', prop: 'updateTime', align: 'left'},

      ],
    });
    const {proxy} = getCurrentInstance()
    let {
      ids,
      loading,
      publicListRef,
      getTableData,
      total,
      tableDataList,
      searchSubmit,
      handlePaginateFun,
      handleSelectionChange
    } = tableMixin({
      getListApi: getGoodsList,
      queryParams:toolList.queryParams,
      getListCallBack(res) {
        total.value = res.data.total;
        toolList.tableDataList =res.data.productList;
      },
    })
    onMounted(() => {
      getTableData()
    })
    const toolChange = (e) => {
      if (e == '1') {
        searchSubmit();
      } else if (e == '3') {
        detailsbool.value = false;
        dialogVisible.value = true;
      } else if (e == '4' || e == '5') {
        if (ids.value.length <= 0) {
          proxy.$message({
            type: "error",
            message: "请选择需要操作的数据!"
          })
          return false
        }
        let params = {
          idArr: ids.value,
          productStatus: e == '4' ? 2 : 1
        }
        disableGoods(params).then(res => {
          proxy.$message({
            type: "success",
            message: (e == '4' ? '启用' : '禁用') + "成功"
          })
          searchSubmit();
        });
      }
    }

    const submitForm = () => {
      console.log(form.formData)
      brandFormRef.value.validate((valid) => {
        if (valid) {
          // addGoods(form.formData).then(res => {
          proxy.$message({
            type: "success",
            message: "操作成功"
          })
          dialogVisible.value = false;
          getTableData()
          // })
        }
      })
    }
    const cancel = () => {

      dialogVisible.value = false;
      brandFormRef.value.resetFields()
    }
    const tableRowClick = (row) => {
      let params = {
        productNum: row.productNum
      }
      detailsGoods(params).then(res => {
        form.formData = res.data.goods;
        detailsbool.value = form.formData == 2 ? true : false;
        dialogVisible.value = true;
      })
    }
    const getPulldownList = async () => {
      let {product} = await productLinePulldown();
      let {series} = await productLineSeriesPulldown({});
      let {brand} = await getBrandList({});
      /*productLinePulldown().then(res => {
        let productLineList = res.data;
        productLineList.forEach((item, index) => {
          item["label"] = item.productLineName
          item["value"] = item.productLineId
        })
        form.basicForm[4].option = productLineList
      })
      productLineSeriesPulldown({}).then(res => {
        let seriesList = res.data;
        seriesList.forEach((item, index) => {
          item["label"] = item.seriesName
          item["value"] = item.seriesId
        })
        form.basicForm[5].option = seriesList
      })
      getBrandList({}).then(res => {
        let brandList = res.data.brandList;
        brandList.forEach((item, index) => {
          item["label"] = item.brandName
          item["value"] = item.brandNum
        })
        form.basicForm[1].option = brandList
      })*/
    }
    getPulldownList()
    const formSelectEmit = (val, currentItem, $index, obj) => {

    }
    return {
      toolList,
      total,
      publicListRef,
      loading,
      ids,
      dialogVisible,
      form,
      brandFormRef,
      detailsbool,
      submitForm,
      cancel,
      handlePaginateFun,
      toolChange,
      handleSelectionChange,
      searchSubmit,
      tableRowClick,
      formSelectEmit
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {},
  computed: {},
  watch: {},
  beforeDestroy() {
  },
  destroyed() {
  }
}
</script>

<style scoped lang="scss">

</style>